<template>
  <a-layout class="layout">
    <Header></Header>
    <a-layout-content class="content">
      <!--banner区域-->
      <div id="banner">
        <div class="cover"></div>
        <div class="mask">
          <h1>致力于提供围绕产品落地为核心的</h1>
          <h1 style="margin-bottom: 70px">研发供应链管理服务</h1>
          <div class="wrapper">
            <img src="../../assets/supply.png">
          </div>
        </div>
      </div>

      <!--产业链服务区域-->
      <div id="service" class="pt-60">
        <h1>真正的全产业链服务，省心省力</h1>
        <div class="inner">
          <a-row type="flex" justify="space-between">
            <a-col span="5" v-for="(item,index) in serviceItem" v-if="index<4" v-bind:key="index">
              <div class="service-item">
                <img :src="item.imgSrc">
                <div class="text">
                  <span>{{item.title}}</span>
                  <span>&nbsp;|&nbsp;</span>
                  <span style="color: #ff4848">￥{{item.price}}.00起</span>
                </div>
              </div>
            </a-col>
          </a-row>
          <a-row type="flex" justify="space-between">
            <a-col span="5" v-for="(item,index) in serviceItem" v-if="index>=4" v-bind:key="index">
              <div class="service-item">
                <img :src="item.imgSrc">
                <div class="text">
                  <span>{{item.title}}</span>
                  <span>&nbsp;|&nbsp;</span>
                  <span style="color: #ff4848">￥{{item.price}}.00起</span>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <!--痛点区域-->
      <div id="pains" class="pt-60 pb-120">
        <h1>产品人，做产品时的这些“坑”，你遇到了几个？</h1>
        <div class="inner">
          <swiper :options="swiperOption" ref="mySwiper" class="inner-swiper">
            <!-- slides -->
            <swiper-slide class="inner-swiper-slide"  v-for="(item,index) in pains" v-bind:key="index">
              <div  >
                <span>{{item.title1}}</span>
                <br>
                {{item.pain}}
              </div>
              <div>
                <span>{{item.title2}}</span>
                <br>
                {{item.advatage}}
              </div>
            </swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
          </swiper>
        </div>
      </div>

      <!--供应链分布区域-->
      <div id="distribute" class="pt-60">
        <h1>洛客研发供应链全球布局</h1>
        <div class="inner clearfix">
          <div class="inner-left fl">
            <img src="../../assets/11.gif" alt="">
          </div>

          <div class="inner-right fl">
            <i></i>
            <p>全产业链服务、设计落地保障、生产品质保障、渠道整合、免费对接供应商</p>
            <a-row class="a-row" type="flex" justify="space-between" >
              <a-col class="a-col">
                  <span class="span1">18+</span>
                  <span class="span2">城市中心</span>
              </a-col>
              <a-col class="a-col">
                <span class="span1">5000+</span>
                <span class="span2">供应商资源</span>
              </a-col>
              <a-col class="a-col">
                <span class="span1">14+</span>
                <span class="span2">客户分布国家</span>
              </a-col>
            </a-row>
          </div>
        </div>
        <ActionButtons></ActionButtons>
      </div>

      <!--现场展示区域-->
      <div id="scene" class="">
        <Scene></Scene>
      </div>

      <!--产品展示区域-->
      <div id="product" class="">
        <Product></Product>
      </div>

      <!--问题展示区域-->
      <div id="question" class="">
        <Ques></Ques>
      </div>

      <!--数据介绍区域-->
      <div id="introduction" class="">
        <CompanyMath></CompanyMath>
      </div>
    </a-layout-content>
    <FooterMore></FooterMore>
  </a-layout>
</template>

<script>
  import Header from "../views/Header.vue"
  import FooterMore from "../views/FooterMore";
  import Scene from "../views/Scene";
  import ActionButtons from "../views/ActionButtons";
  import Ques from "../views/Ques";
  import CompanyMath from "../views/CompanyMath";
  import Product from "../views/Product";

  const serviceItem = [
    {
      title: "软硬件开发",
      price: 60000.00,
      imgSrc: require("../../assets/service-item1.jpg")
    },
    {
      title: "结构设计",
      price: 10000.00,
      imgSrc: require("../../assets/service-item2.jpg")
    },
    {
      title: "手板制作",
      price: 3000.00,
      imgSrc: require("../../assets/service-item3.jpg")
    },
    {
      title: "供应商匹配",
      price: 0.00,
      imgSrc: require("../../assets/service-item4.jpg")
    },
    {
      title: "模具设计与制作",
      price: 0.00,
      imgSrc: require("../../assets/service-item5.jpg")
    },
    {
      title: "检测认证",
      price: 20000.00,
      imgSrc: require("../../assets/service-item6.jpg")
    },
    {
      title: "大数据分析",
      price: 1888.00,
      imgSrc: require("../../assets/service-item7.jpg")
    },
    {
      title: "电商运营",
      price: 588.00,
      imgSrc: require("../../assets/service-item8.jpg")
    },
  ];
  const pains = [
    {
      title1: "痛点一",
      pain: "创意天马行空，设计逼格满满，产品落地时加工工艺、材料、结构等无法实现。",
      title2: "我们的优势",
      advatage: "多年供应链管理经验，为设计提供生产落地保障，风险把控确保产品还原设计。"
    },
    {
      title1: "痛点二",
      pain: "生产流程复杂，没有专业的项目管理方法，对生产工艺、材料、流程不专业，很难控制周期、成本、价格等多类因素。",
      title2: "我们的优势",
      advatage: "100名专业高级工程师团队，不良品数量控制在500-1000PPM以下，平均降低成本20%，计划达成率95%以上。"
    },
    {
      title1: "痛点三",
      pain: "一个项目需要对接的各类目工厂太多，没有多年经验和资源的积累，很难找到合适且优质的供应商。",
      title2: "我们的优势",
      advatage: "积累3000+以上细分行业供应商，每一家供应商都经过实地考察，确保合适、有效、快速。"
    },
    {
      title1: "痛点四",
      pain: "新产品市场调研很有前景，投放到市场却没有销路，产品根本卖不动。",
      title2: "我们的优势",
      advatage: "拥有丰富的渠道资源，跟各大跨境电商，国外线下商超渠道建立战略合作关系，打通产品的销售通路。"
    },
  ]

  export default {
    name: "Supply",
    data() {
      return {
        serviceItem,
        pains,
        swiperOption: {
          autoplay: false,
          // speed:1000,
          // autoplayDisableOnInteraction : false,//用户操作swiper之后，是否禁止autoplay
          loop: true,
          slideToClickedSlide: true,
          width: 1240,

          slidesPerView: 3,
          centeredSlides: true,

          pagination: '.swiper-pagination',
          paginationClickable: true,//点击分页器是否会切换
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        },
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      // this.swiper.slideTo(3, 1000, false)
    },
    components: {
      Product,
      CompanyMath,
      Ques,
      ActionButtons,
      Scene,
      FooterMore,
      Header
    }
  }
</script>

<style scoped>
  .pt-60 {
    padding-top: 60px;
  }

  .pb-120{
    padding-bottom: 120px;
  }

  .fl{
    float: left;
  }
  .fr{
    float: right;
  }

  .clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
  }
  
  .full-height {
    height: 100vh;
  }

  .content {
    min-height: 800px;
    margin-top: 75px;
  }

  #banner {
    width: 100%;
    height: 500px;
    position: relative;
  }

  #banner .cover {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url("../../assets/banner-bg.png") no-repeat;
    background-position: left;
  }

  #banner .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 100px;
  }

  #banner .mask h1 {
    font-size: 60px;
    color: #fff;
    line-height: 90px;
    text-align: center;
    font-weight: 400;
  }

  #banner .wrapper {
    width: 975px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
  }

  #service{
    background: #fff;
  }
  #service .inner {
    width: 1220px;
    margin: 0 auto;
    padding-bottom: 30px;
  }

  #service h1 {
    font-size: 44px;
    color: #1e1e1e;
    text-align: center;
    font-weight: 400;
    margin-bottom: 62px;
  }

  #service .inner .service-item img {
    width: 100%;
    height: 190px;
  }

  #service .inner .service-item .text {
    padding: 16px 10px;
    font-size: 13px;
  }


  #pains h1 {
    font-size: 44px;
    color: #1e1e1e;
    text-align: center;
    font-weight: 400;
    margin-bottom: 62px;
  }

  #pains .inner .inner-swiper {
    width: 1240px;
    margin: 0 auto;
    overflow: hidden;
  }

  #scene{
    background: #eee;
  }
  .swiper-slide {
    cursor: pointer;
    height: 290px;
    background: aquamarine;
    position: relative;
    top: 30px;
    z-index: 10 !important;
    background: url("../../assets/normal.png") 352px -20px no-repeat #fff;
    border: 2px solid #f1f4f7;
  }
  .swiper-slide div{
    padding-left: 42px;
    padding-right: 40px;
    font-size: 13px;
    color: #797E8F;
    line-height: 30px;
    padding-top: 25px;
    text-align: left;
  }

  .swiper-slide-prev {
    transition-duration: 0ms;
    transform: translate3d(100px, 0px, -100px) rotateX(0deg) rotateY(0deg);
    z-index: 0;
  }
  .swiper-slide-next {
    transition-duration: 0ms;
    transform: translate3d(-100px, 0px, 100px) rotateX(0deg) rotateY(0deg);
    z-index: 0;
  }
  .swiper-slide-active {
    background-image: url("../../assets/active.png");
    background-repeat: no-repeat;
    background-position: 352px -20px;
    width: 480px !important;
    height: 350px;
    z-index: 222 !important;
    background-color: #0075D4;
    position: relative;
    top: 0;
    padding: 50px 50px 0;
    box-sizing: border-box;

  }
  .swiper-slide-active  div{
    font-size: 14px!important;
    color: #fff!important;
    line-height: 36px!important;
    text-align: left!important;
    padding: 0 0!important;
  }
  .swiper-slide-active div:nth-child(1) {
    margin-bottom: 35px;
  }

  #distribute{
    background: #fff;
  }

  #distribute h1{
    font-size: 44px;
    color: #1e1e1e;
    text-align: center;
    font-weight: 400;
    margin-bottom: 62px;
  }

  #distribute .inner{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 60px;
  }
  #distribute .inner .inner-left {
    margin-right: 115px;
  }
  #distribute .inner .inner-right {
    padding-top: 20px;
    box-sizing: border-box;
    width: calc(100% - 635px);

  }
  #distribute .inner .inner-right i{
    display: inline-block;
    width: 31px;
    height: 29px;
    margin-bottom: 105px;
    background-image: url("../../assets/01.png");
    background-repeat: no-repeat;
    float: left;
  }
  #distribute .inner .inner-right p{
    font-size: 22px;
    color: #323a52;
    margin-right: 10px;
    width: 462px;
    height: 61px;
    display: inline-block;
    margin-top: 15px;
    float: left;
    margin-left: 30px;
    text-align: left;
  }
  #distribute .inner .inner-right .a-row{
    width: 100%;

  }
  #distribute .inner .inner-right .span1{
    font-size: 54px;
    font-weight: 900;
    color: #323A52;
  }
  #distribute .inner .inner-right .span2{
    text-align: center;
    height: 18px;
    margin: 0;
    color: #797E8F;
    font-size: 18px;
    display: block;
    width: 100%;
  }


</style>